<template>
  <!--投诉公示-->
  <div class="container">
    <div class="header">
      <loginHeader
        :isShowType="isShowType"
        :activeIndex="activeIndex"
        :isShowToHome="true"
      ></loginHeader>
    </div>
    <div class="main">
      <div class="bannerbox">
        <div class="banner">
          <img src="../../../static/img/common/interfaceBanner.png" />
        </div>
      </div>
      <div class="content">
        <div class="leftBox">
          <p class="flow">对接流程</p>
          <p class="contactInfo">对接联系方式</p>
          <p class="download">对接文档下载</p>
        </div>
        <div class="centerBox">
          <div class="circle"></div>
          <div class="dotted"></div>
          <div class="circle"></div>
          <div class="dotted"></div>
          <div class="circle"></div>
        </div>
        <div class="rightBox">
          <p class="step">步骤一</p>
          <p class="description">
            与公司客服部取得联系，完成前期对接工作；在客服的指引下完成开发appID、密钥信息的申请。
          </p>
          <p class="step">步骤二</p>
          <p class="description">
            下载最新接口文档，根据约定进行开发，在开发过程中遇到问题时，可随时进行沟通交流。
          </p>
          <p class="step">步骤三</p>
          <p class="description">
            正式投产前，完成所有测试工作，确保数据实时、完整、有效；根据投产通知内容联系相关人员，申请投产appID、密钥等相关信息。
          </p>
          <div class="bottomBorder"></div>
          <p class="tel">客服专线 4000-966-687</p>
          <div class="bottomBorder"></div>
          <p class="download" @click="downLoad">
            全国劳动保障实名制标准接口文档(v3.0.21.609)—试行.pdf
            <i class="icon iconfont iconShapecopy"></i>
          </p>
          <div class="bottomBorder"></div>
        </div>
      </div>
    </div>
    <loginFooter></loginFooter>
  </div>
</template>

<script>
import loginHeader from '@/components/publicCom/loginHeader'
import loginFooter from '@/components/publicCom/loginFooter'
export default {
  name: 'interfaceDocking',
  components: {
    loginHeader,
    loginFooter,
  },
  data() {
    return {
      isShowType: false,
      activeIndex: '2',
    }
  },
  created() {},
  methods: {
    goBackList() {
      this.$router.push('/login/loginFirst')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/login/loginFirst',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    downLoad() {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: 'realnameInterface',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.header {
  position: absolute;
  top: 0;
  width: 100%;
  background: #08205c;
  background: linear-gradient(
    left,
    #08205c 0%,
    #0f4d9a 10%,
    #0f4d9a 90%,
    #08205c 100%
  );
  height: 64px;
}

.bannerbox {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 240px;
}

.banner {
  width: 1920px; /*图片宽度*/
  position: absolute;
  left: 50%;
  margin-left: -960px; /*图片宽度的一半*/
  z-index: 10;
}
.main {
  width: 100%;
  overflow: auto;
  top: 64px;
  position: absolute;
  z-index: 10;
  /* bottom: 94px; */
  bottom: 0px;
}

.content {
  margin: 0 auto;
  width: 1100px;
  height: 730px;
  padding-bottom: 50px;
  .leftBox {
    width: 136px;
    float: left;
    font-size: 22px;
    .flow {
      margin-top: 52px;
    }
    .contactInfo {
      margin-top: 354px;
    }
    .download {
      margin-top: 102px;
    }
  }
  .centerBox {
    width: 260px;
    float: left;
    padding-left: 224px;
    margin-top: 58px;
    .circle {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #cbcbcb;
    }
    .dotted {
      height: 90px;
      width: 0;
      border: 1px dotted #cbcbcb;
      margin-left: 5px;
    }
  }
  .rightBox {
    width: 700px;
    float: left;
    margin-top: 52px;
    .step {
      font-size: 18px;
      color: #67747f;
    }
    .description {
      margin-top: 16px;
      margin-bottom: 40px;
      font-size: 16px;
      color: #67747f;
    }
    .tel {
      font-size: 18px;
      color: #67747f;
    }
    .bottomBorder {
      border-bottom: 1px solid #d5dee7;
      margin: 52px 0;
    }
    .download {
      margin-top: 52px;
      font-size: 16px;
      color: #47abff;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.container .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 64px;
  line-height: 64px;
  background-color: #3e3e4a;
  text-align: center;
  color: #ffffff;
  margin-top: 50px;
  font-size: 14px;
  margin-bottom: 0;
  z-index: 9999;
}
.title {
  background-color: #deeff9;
}
.evm-box {
  display: inline-block;
  width: 240px;
  text-align: center;
}
.evm-img {
  width: 130px;
  height: 130px;
  margin-top: 20px;
}
.evm-t {
  display: block;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  width: 240px;
  margin-top: 10px;
}
.evm-v {
  display: block;
  font-size: 14px;
  color: #999999;
  text-align: center;
  width: 240px;
}
</style>
